<template>
  <div class="mui-card" style="margin-bottom: 35px;">
        <ul class="mui-table-view mui-table-view-chevron">
			<li 
             v-for="item in newList"
             class="mui-table-view-cell mui-media">
				<routerLink :to="'/indexInfo/newDetail/movie/'+item.id" class="mui-navigate-right">
					<img class="mui-media-object mui-pull-left" referrerpolicy ="never" :src="item.images.small">
					<div class="mui-media-body">
                        <p class="interestNumber">
                            <span>{{item.title}}</span>
                            <span>
                                <span>{{item.collect_count}}</span>&nbsp collected
                            </span>
                        </p>
						<p class='mui-ellipsis'>
                            <span  v-for="item in item.genres"> {{item}} </span> &nbsp | &nbsp
                            <span>{{item.pubdates[0]}}</span>
                        </p>
					</div>
				</routerLink>
			</li>
            <div class="mui-card-footer" @click="getNewList (start=start+count,count=10)">加载更多...</div>
		</ul>
  </div>
</template>

<script>
import {Toast} from 'mint-ui';
export default {
    data () {
        return {
           newList:[],
           start:0,
           count:10,
           commentsView:true
        }
    },
    created () {
        this.getNewList ();
    },
    methods: {
        getNewList (start=0,count=10) {
            this.$http.get("v2/movie/coming_soon?start="+start+"&count="+count).then(result=>{
                this.newList = this.newList.concat(result.body.subjects);
                if(result.body.subjects.length === 0) {
                    Toast('木得了')
                }
                console.log(result)
            }).catch((err)=>{
                Toast('请求超时')
                console.log(err)
            })
        }
    }

}
</script>

<style lang="scss" scoped>
    .interestNumber {
        color: #666;
        display: flex;
        justify-content: space-between;
    }
    .interestNumber > span:nth-child(2) > span {
        color: #fa2d0966;
        font-size: 14px;
    }
    .interestNumber > span:nth-child(2) {
        font-size: 12px;
        color: #8f8f94;
    }
    .mui-ellipsis {
        font-size: 12px;
    }
</style>